Code Editor

Alright, let's talk code editors!

By far, the most popular editor used by React developers is Visual Studio Code, commonly abbreviated to VS Code.

It's a cross-platform editor, and can be downloaded on its homepage.

Extensions are community-developed plugins that extend the editor in some way.

Here's a complete list of every extension I have installed:

• Community Material Theme — A color theme. I use the “Ocean” variant.
• Prettier — Adds support for Prettier formatting. We'll talk about Prettier later in this module as well.
• ESLint — Adds support for ESLint warnings and errors. We'll talk about ESLint later in this module.
• styled-components — Adds syntax highlighting support for styled-components, a CSS-in-JS solution.
• MDX — Provides syntax highlighting for MDX files. MDX is a language that fuses Markdown and React. I use it in my blog and in this course platform. You can probably skip it.

It's possible to open individual files in VS Code, but it's much more practical to open an entire project at once, by loading all files in its directory.

This can be done through the terminal by cd-ing into the project directory and running:

code .

The code command will open a specified file or directory in VS Code. As we saw in the “Navigation” lesson, the dot character (.) refers to the current directory.

If you're using macOS, you'll need to do a bit of work to enable the code command.